<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body class="dpflex fdcolumn">
    <main>
        <!-- 轮播 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../images/index-swiper-bg1.jpg" alt="swiper-1">
                </div>
                <div class="swiper-slide">
                    <img src="../images/index-swiper-bg2.jpg" alt="swiper-2">
                </div>
                <div class="swiper-slide">
                    <img src="../images/index-swiper-bg3.jpg" alt="swiper-3">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>

        <!-- 内容模块 -->
        <div class="index-content">
            <section class="dpflex">
                <div class="rank">
                    <h3>今日排名</h3>
                    <p id="rankNum">9</p>
                </div>
                <div class="clock">
                    <h3>累计打卡<span id="clockNum">-</span>天</h3>
                    <button id="clockBtn" type="button">今日打卡</button>
                </div>
            </section>
            <section class="dpflex">
                <div id="dataLink" class="data">
                    <h3>运动数据</h3>
                </div>
                <div id="badgeLink" class="badge">
                    <h3>累计运动徽章</h3>
                    <p><span id="badgeNum">3</span>枚</p>
                </div>
            </section>
            <section class="dpflex sec3">
                <div id="trainLink" class="train">
                    <h3>课程训练</h3>
                </div>
            </section>
            <section>
                <div id="runLink" class="run">
                    <h3>户外跑步</h3>
                </div>
            </section>
        </div>
    </main>

    <!-- 载入封装底部 -->

    <!-- 载入层 -->
    <div id="loadMask" class="load-mask">
        <p>Loading</p>
    </div>
    <div id="outMask" class="out-mask">
        <p>Loading</p>
    </div>

    <!-- js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</body>

</html>